<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>门店储值金</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/rechargeActive.css">
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-clock>
        <!-- 主体区域 -->
        <div class="mainBox">
            <img src="./img/3522Img/recharge/activeTopBg.png" class="activeTopBg" alt="">
            <div class="topCard">
                <div class="userInfoBox">
                    <img :src="user.cityName" alt="">
                    <div>
                        <span>{{user.userName}}</span>
                        <div v-if="userStored.grade==null||userStored.grade==0">您暂时还未解相关权益，去开通会员吧</div>
                        <img src="./img/3522Img/recharge/vip2.png" v-if="userStored.grade==-1||userStored.grade==1"
                            alt="">
                        <img src="./img/3522Img/recharge/vip3.png" v-if="userStored.grade==2" alt="">
                        <img src="./img/3522Img/recharge/vip4.png" v-if="userStored.grade==3" alt="">
                        <img src="./img/3522Img/recharge/vip5.png" v-if="userStored.grade==4" alt="">
                    </div>
                </div>
                <div class="tipBox">
                    <div>
                        <span>会员每推荐他人成为会员即得</span>
                        <span>365 元储值金</span>
                    </div>
                    <div>
                        <span>已成功邀请</span>
                        <span>{{userFlag==0?0:userNum}}人</span>
                    </div>
                </div>


                <img v-if="userFlag==0" @click="payHandle" src="./img/3522Img/recharge/buyCard.png" class="buyImg"
                    alt="">
                <div class="listBox" v-else>
                    <div class="listTop">
                        <div>
                            <span>
                                <span>￥</span>
                                <span>{{userNum*365}}</span>
                            </span>
                            <span>累计获得储值金</span>
                        </div>
                        <div>
                            <span>
                                <span></span>
                                <span>{{userNum}}</span>
                            </span>
                            <span>邀请成功（人）</span>
                        </div>
                    </div>
                    <div class="listMain">
                        <div class="mainTip">邀请记录</div>
                        <div class="listcon" v-if="list.length!=0">
                            <div v-for="(item,index) in list" :key="index">
                                <span>{{item.memoryTime}}</span>
                                <span>{{item.userName}} 支付365元</span>
                                <span>+365</span>
                            </div>
                        </div>
                        <img v-else src="./img/3522Img/recharge/empty.png" class="emptyImg" alt="">
                    </div>
                </div>
            </div>
            <!-- 规则 -->
            <div class="ruleBox">
                <div class="ruleTop">
                </div>
                <div v-html="rules" class="ruleCon"></div>
            </div>
        </div>



        <!-- 购买按钮 开始 -->
        <div class="downBtnBox">
            <div class="submitBtn" @click="downHandle">
                立即下载APP
            </div>

        </div>

        <!-- 主体区域 -->


        <!-- 遮罩层 -->
        <div class="loading" v-if="isShow">
            <img src="../img/load.gif" alt="">
        </div>
    </div>

    <script src="../js/vue.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    isShow: false,
                    rules: '',
                    // user_id: 97740,
                    // shop_id:1,
                    // myShopId: 1,
                    // user: JSON.parse(localStorage.user),
                    user_id: sessionStorage.getItem('userId'),
                    shop_id: sessionStorage.getItem('shopId'),
                    myShopId: sessionStorage.myShopId,
                    user: JSON.parse(sessionStorage.user),
                    userFlag: 0,
                    userNum: 0,
                    userStored: '',
                    list: [],
                }
            },
            created() {
                this.getData()
                this.getRule()
            },
            mounted() {

            },
            methods: {
                downHandle: function () {
                    window.location.replace("../newDown.html")
                },
                payHandle() {
                    var that = this;
                    that.isShow = true
                    ajax({
                        url: newUrl + 'stored/addUserBuyOutright',
                        type: 'POST',
                        data: {
                            openId: sessionStorage.openId,
                            userId: sessionStorage.userId,
                            shopId: sessionStorage.shopId,
                            parentId: sessionStorage.shareId,
                            storedNum: 365,
                            flag: 1,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                console.log(res);
                                that.isShow = false
                                onBridgeReady(res.data.finalPackage)
                            }
                        }
                    })
                },

                getRule() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'stored/listRules',
                        type: 'post',
                        data: {
                            flag: 3
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                _this.rules = res.data.ruleContent
                                console.log(_this.rules);
                            }
                        }
                    })
                },
                getData() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'stored/listUserBuyOutright',
                        type: 'post',
                        data: {
                            userId: _this.user_id,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                if (res.data.parentUser.length != 0) {
                                    _this.userFlag = res.data.parentUser[0].flag
                                }
                                _this.list = res.data.users
                                _this.userNum = res.data.users.length
                                console.log(_this.userFlag);
                                console.log(_this.list);
                                _this.getStored()
                            }
                        }
                    })
                },
                getStored() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'stored/listMain',
                        type: 'post',
                        data: {
                            userId: _this.user_id,
                            shopId: _this.shop_id
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                console.log(res);
                                _this.userStored = res.data.userStored

                                _this.userFlag = _this.userStored.grade != 0 ? 1 : _this.userFlag
                                console.log(_this.userStored);
                                // _this.userStored.grade = 0
                            }
                        }
                    })
                },

            },
        })

        function wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        }

        function onBridgeReady(data) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入
                "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": data.nonceStr, //随机串
                "package": data.package,
                "paySign": data.paySign, //微信签名
                "signType": data.signType //微信签名方式：
            },
                function (res) {
                    // 支付成功
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        alert('支付成功，请前往值班长App查看')
                        app.isShow = false
                        app.getData()
                    }
                    // 支付过程中用户取消
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('已取消支付')
                        app.isShow = false
                    }
                    // 支付失败
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失败')
                        app.isShow = false
                    }
                    if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                    }
                });
        }
    </script>
</body>